<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <h2>{{time | timeFormatter}}</h2>
        <h2>{{time | timeFormatter('秒')}}</h2>
        <!-- 前面是要过滤的，后面是过滤器，过滤器本质还是个函数-->
    </div> 
    <script type="text/javascript">
        //过滤器实现时间格式化
    Vue.config.productionTip = false
    // Vue.filter('name',function(value){}) 用这种形式来设置全局过滤器，前面是名字，后面是一个回调函数，其余的同局部
    new Vue({
        el:'#root',
        data:{
            time:Date.now()
        },
        filters:{//多个过滤器可以串联，在里面的都是局部的过滤器，别的vue和组件不能用
            timeFormatter(value,type='毫秒'){//value就是前面的time,后面可以再加参数
                return value+type
            }
        }
    })
    //过滤器是要对显示的数据格式化后再显示，不改变原来的数据
    </script>
</body>
</html>